*{
    margin:0;
    padding:0;
}
html,body{
    width:100%;
    height:100%;
    background-color:#000;
    background-image:radial-gradient(circle at center center,rgba(244,23,234,0.2),rgba(0,0,0,0));
    /* background-repeat: no-repeat; */
    overflow: hidden;
}
.wrapper{
    perspective: 1000px;/* 添加景深，perspective 规定了观察者距离垂直于元素 2D 平面下的距离。距离越远，说明他离平面的距离越远 */
}
.box{
    position: relative;
    width:120px;
    height: 180px;
    margin:200px auto;
    transform-style: preserve-3d; /* 展示形式是3d */
}
.box img{
    position: absolute;
    width:100%;
    height:100%;
    /* 从下到上，从rgba(0,0,0,0)开始渐变、到高度40%位置是绿色渐变开始、最后以rgba(0,0,0,0.5)结束 */
    -webkit-box-reflect: below 10px  -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5) 100%);
}